<template>
	<view class="recharge flex-between">
		<view class="top flex-center-column">
			<view class="card">
				<view class="tabs flex-center">
					<view :class="{active:tabIndex == 0}" @click="changeTab(0)">trc20</view>
					<view :class="{active:tabIndex == 1}" @click="changeTab(1)">erc20</view>
				</view>
				<view class="qrcode flex-center">
					<image src="/static/1.jpg" mode="aspectFill"></image>
				</view>
			</view>
			<text>充值地址</text>
			<view class="p">jksdfjkjlsdfjksdkjsdfjsdkfjsdkfj</view>
			<view class="btn flex-center">点击复制</view>
		</view>
		<view class="bottom">
			<view class="p">
				1、最小充值金额:5.0000USDT，小于最小金额的充值将不会上账且无法退回。
			</view>
			<view class="p">
				2、请勿向上述地址充值任何非trc20、erc20资产，否则资产将不可找回。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0
			};
		},
		methods: {
			changeTab(i) {
				this.tabIndex = i;
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #fff;
	}

	@color: #d4237a;

	.recharge {
		padding:20rpx 40rpx;
		box-sizing: border-box;
		flex-direction: column;
		.top {
			margin-bottom: 15vh;
			.card {
				width: 500rpx;
				border: 1rpx solid #ddd;
				border-radius: 30rpx;

				.tabs {
					height: 120rpx;
					border-bottom: 1rpx solid #ddd;
				}

				.qrcode {
					height: 360rpx;
				}

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			text {
				font-size: 30rpx;
				color: #777;
				margin: 40rpx 0;
			}

			.btn {
				width: 200rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: @color;
				color: #fff;
				font-size: 30rpx;
				margin-top: 40rpx;
			}

		}
		.bottom{
			font-size: 26rpx;
			color:#888;
			.p{
				margin-bottom: 40rpx;
			}
		}
	}
</style>
